<template>
	<view class="container" :style="{paddingTop: `${getSystemInfo.navBarHeight}px`}">
		
		<navBar title="门店详情" />
		
		<!-- 轮播 -->
		<view class="swiper-content">
			<swiper
				class="swiper"
				circular
				autoplay
				indicator-dots
				:interval="3000"
				:current="swiperCurrent"
				@change="handleSwiperChange"
			>
				<swiper-item v-for="item in swiperData" :key="item">
					<view class="swiper-item">
						<image
							:src="item"
							mode="scaleToFill"
							@click.stop="handlePreviewSwiper"
						></image>
					</view>
				</swiper-item>
			</swiper>
			
			<view class="swiper-idot" v-if="swiperData.length">
				{{ swiperCurrent + 1 }}/{{ swiperData.length }}
			</view>
		</view>
	
		<!-- 门店信息 -->
		<view class="store-info">
			<view class="si-header">
				<view class="sih-title">{{ info.name }}</view>
				<!-- <view class="sih-icon" @click="handleLookPhoto">
					<uni-icons type="right" size="14" class="tst-icon" />
				</view> -->
				<view class="sih-share">
					<button open-type="share">
						<u-icon name="share-square" color="#333333" size="32" ></u-icon>
						<view  class="sih-label" > 分享 </view>
					</button>
				</view>
			</view>
			<view class="siml-eval">
				<uni-rate v-if="info.score" readonly :max="1" :size="16" :value="info.score ? 1 : 0" allow-half activeColor="#F05A5C"/>
				<text :class="['siml-text', info.score && 'text-color']">{{ info.score && info.score.toFixed(1) || '暂无评分' }}</text>
				<text class="siml-flag"> | </text>
				<text :class="['siml-comment', info.evaluationNum && 'text-color']">{{ info.evaluationNum || 0 }} 评论</text>
			</view>
<!-- 			<view class="si-tag" v-if="info.promotionLabel && info.promotionLabel.length">
				<view class="sit-item" v-for="label in info.promotionLabel" :key="label.labelName">{{ label.labelName }}</view>
			</view> -->
			<view class="si-tagList" v-if="info.tagList && info.tagList.length" @click.stop="popupShow = true">
				<view class="sitl-item" v-for="tag in info.tagList" :key="tag.tagId">{{ tag.tagName }}</view>
			</view>
			<view class="si-main">
				<view class="sim-left">
					<!-- <view class="siml-dis"> -->
						<!-- <text class="siml-flag"> | </text> -->
					<view class="simld-place">{{ info.address }}</view>
					<!-- </view> -->
					<view class="simld-km">距离您 <text style="color: #CF1A1B; margin: 0 6rpx;">{{ info.distance || 0 }}</text> km</view>
				</view>
				<view class="sim-right">
					<view class="simr-action" v-for="item in relationList" :key="item.flag" @click="handleAction(item)">
						<image :src="item.icon" mode="scaleToFill"></image>
						<text class="simra-title">{{ item.title }}</text>
					</view>
				</view>
			</view>
		</view>
	
		<!-- 商品、评论 -->
		<view class="tabs" :style="{ backgroundColor: !isCommentList ? '#ffffff' : 'transparent'}">
			<view class="tabs-select">
				<u-tabs
					:list="tabsLabel"
					:current="tabsCurrent"
					@click="onClickItem"
					:scrollable="false"
					lineColor="#F05A5C"
					:lineHeight="tabsCurrent !== -1 ? 8 : 0"
					lineWidth="44"
					:activeStyle="{ color: '#040812', 'text-shadow': '0 0 0.1px currentColor' }"
					:inactiveStyle="{ color: '#4A5366' }"
					:itemStyle="{ height: '80rpx', width: '112rpx' }"
				></u-tabs>
				<view @click.stop="tabsSelectCom" :class="['ts-com', tabsCurrent !== -1 ? '' : 'tabs_item_com_line']">
					卡友评论
					<text class="ts-com-count">({{ info.evaluationNum || 0 }})</text>
				</view>
			</view>

			<view class="tabs-content" :style="{ padding: tabsCurrent !== -1 ? '20rpx 32rpx 40rpx' : '20rpx 20rpx 38rpx'}">
				<!-- 轮胎、保养 -->
				<view v-if="tabsCurrent !== -1">
					<view class="tc-list" v-for="item in data" :key="item.goodsId" @click="gotoMainDetail(item.jfcode)">
						<view class="tcl-left">
							<view class="tcll-goods">
								<img :src="item.imgURL || goodsDefault" alt="">
								<view class="tcll-g-markrt" v-if="item.buyPromotion && item.buyPromotion.buyPromotionList && item.buyPromotion.buyPromotionList.length">
									<view class="tcll-gm-left">
										满 <text class="tcll-gml-count">{{ item.buyPromotion.buyNum }}</text> 条
									</view>
									<view class="tcll-gm-right">
										<!-- BUY_GIFT-购物有礼，RAFFLE-购胎抽奖 -->
										<template v-if="item.buyPromotion.buyPromotionList.length === 1">
											<text v-if="item.buyPromotion.buyPromotionList[0].code === 'BUY_GIFT'">享赠品</text>
											<text v-else="item.buyPromotion.buyPromotionList[0].code === 'RAFFLE'">享抽奖</text>
										</template>
										<text v-else>享赠品和抽奖</text>
									</view>
								</view>
							</view>
							<view class="tcll-mark" v-if="item.promotionLabel && item.promotionLabel.length">
								<!-- DISCOUNT-会员折扣,POINT-积分 -->
								<template v-if="item.promotionLabel.length === 1">
									<img v-if="item.promotionLabel[0].code === 'DISCOUNT'" src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_mark_discount.png" alt="">
									<img v-else-if="item.promotionLabel[0].code === 'POINT'" src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_mark_int.png" alt="">
								</template>
								<img v-else src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_mark_int_dis.png" alt="">
							</view>
						</view>
						<view class="tcl-right">
							<view class="tclr-title ellipsis-2">{{ item.name }}</view>
						<!-- 	<view class="tclr-discount" v-for="dis in item.promotionList" :key="dis.sort">
								<view class="tclrd-tag">{{ dis.typeName }}</view>
								<view class="tclrd-des">{{ dis.title }}</view>
							</view> -->
							<view class="tclr-tagList" v-if="item.tagList && item.tagList.length" >
								<view class="tclrt-item" v-for="tag in item.tagList" :key="tag.id">{{ tag.name }}</view>
							</view>
							<view class="tclr-money">
								<text class="tclrm-color">
									<text class="tclr-dollar" v-if="item.discountShowPrice">券后价￥</text>
									{{ item.discountShowPrice || 0 }}
									</text>
								<text class="tclrm-delete">
									<text class="tclr-dollar">￥</text>
									{{ item.sellPrice || 0 }}
								</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 评论 -->
				<view v-else>
					<!-- 评分 -->
					<view class="tc-score">
						<view class="tsc-left">
							<text :class="['tscl-count', info.score && 'text-color']" :style="{ 'text-shadow': info.score ? '0 0 0.1px currentcolor' : ''}">
								<text >{{ info.score ? info.score.toFixed(2) : '暂无评分'  }} <text v-if="info.score" class="tscl-count-text">分</text> </text>
							</text>
							<uni-rate v-if="info.score" readonly :max="5" :size="12" :value="info.score" allow-half activeColor="#F05A5C"/>
						</view>
						<view class="tsc-right">
							<view class="tscr-type">
								<text class="tscrt-label">服务</text>
								<text class="tscrt-value">{{ commentInfo.saScore || '暂无' }}</text>
							</view>
							<view class="tscr-type">
								<text class="tscrt-label">技术</text>
								<text class="tscrt-value">{{ commentInfo.tlScore || '暂无' }}</text>
							</view>
							<view class="tscr-type">
								<text class="tscrt-label">配件</text>
								<text class="tscrt-value">{{ commentInfo.score || '暂无' }}</text>
							</view>
							<view class="tscr-type">
								<text class="tscrt-label">价格</text>
								<text class="tscrt-value">{{ commentInfo.rpScore || '暂无' }}</text>
							</view>
						</view>
					</view>
					<!-- 评价 -->
					<view class="tc-c-list" v-for="item in commentData" :key="item.id" @click="gotoCommentDetail(item.id)">
						<!-- 头部基本信息 -->
						<view class="tc-cl-header">
							<view class="tc-clh-left">
								<view class="tc-clhl-img">
									<image :src="item.headImgUrl || currentImg" mode="scaleToFill"></image>
								</view>
								<view class="tc-clhl-baseInfo">
									<view class="tc-clhlb-number">
										<view class="tc-clhlbn-phone">
											{{ item.driverMobile && item.driverMobile.replace(item.driverMobile.substring(3, 7), '****') }}
										</view>
										<view class="tc-clhlbn-car" v-if="item.plateNum">
											<!-- {{ item.plateNum && item.plateNum.replace(item.plateNum.substring(2), '******')}} -->
											<view class="tc-clhlbn-car-box">
												<view class="tc-clhlbn-car-box-left">
													{{ item.plateNum && item.plateNum.slice(0, 2) }}
												</view>
												<view class="tc-clhlbn-car-box-right">
													{{ item.plateNum && item.plateNum.slice(2) }}
												</view>
											</view>
										</view>
									</view>
									<view class="tc-clhlb-score">
										<uni-rate readonly :max="5" :size="10" :value="item.score" allow-half activeColor="#F05A5C"/>
										<text :class="['siml-text', item.score && 'text-color']">
											{{ item.score ? parseInt(item.score) === parseFloat(item.score) ? `${item.score}.0` : item.score : '暂无评分' }}
										</text>
									</view>
								</view>
							</view>
							<view class="tc-clh-right">
								{{ item.createdTime }}
							</view>
						</view>
						<!-- 评价内容 -->
						<view class="tc-cl-main">
							<view class="tc-clm-content ellipsis-2">{{ item.content }}</view>
							<view class="tc-clm-video" v-if="item.attachList && item.attachList.length">
								<view class="tc-clmv-list" v-for="vio in getAttachList(item.attachList)" :key="vio.attachUrl">
									<video v-if="videoTypeList.includes(getFileType(vio.attachUrl))" :src="vio.attachUrl" @error="videoErrorCallback" ></video>
									<image v-else :src="vio.attachUrl || currentImg" mode="aspectFill" @click.stop="handlePreviewImage(vio.attachUrl)"></image>
								</view>
							</view>
						</view>
						<!-- 回复 -->
						<view class="tc-cl-reply" v-if="item.replyState === 'Y'">
							<view class="tc-clr-icon">
								<image src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/ic_huifu.png" mode=""></image>
							</view>
							<view class="tc-clr-des ellipsis-2">
								<text class="tc-clrd-label">门店回复：</text>
								<text class="tc-clrd-value">
									{{ item.replyContent }}
									</text>
							</view>
						</view>
					</view>
				</view>
				
				<view v-if="(!isCommentList && dataEmpty) || (isCommentList && commenyEmpty)" class="empty">
				 <image src="@/static/empty.png"></image>
				 <text>无数据</text>
				</view>
			</view>
			<view class="tabs-loadmore-text" v-if="showLoadMore">{{ loadMoreText }}</view>
		</view>
	
		<!-- 门店服务标签 -->
		<u-popup
			:show="popupShow"
			:round="20"
			mode="bottom"
			@close="popupClose"
			:closeOnClickOverlay="true"
			>
			<view class="popup-content">
				<view class="pc-title">
					<text>门店标签</text>
					<u-icon name="close" color="#C8C9CC" size="32" @click="popupShow = false"></u-icon>
				</view>
				<view class="pc-list">
					<view :class="['pc-item']" v-for="item in popupList" :key="item.tagId">
						{{ item.tagName }}
					</view>
				</view>
			</view>
		</u-popup>
	
	</view>
</template>

<script>
	import currentImg from '@/static/currentImg.png'
	import goodsDefault from '@/static/goods_default_square.png'
	import navBar from '@/components/navBar.vue'
	import { mapGetters } from 'vuex'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				currentImg,
				goodsDefault,
				terminalId: '',
				userId: '',
				info: {},
				swiperData: [],
				// imgList: [
				// 	'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				// 	'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/kyzj/KYZJ_APP_QRC.png',
				// 	'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
				// ],
				relationList: [
					{ icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_daohang4.png', title: '导航', flag: 'navigation'},
					{ icon: 'https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/store/icon_dianhua4.png', title: '电话', flag: 'phone'}
				],
				// tabsLabel: ['轮胎', '保养', '卡友评论'],
				tabsLabel: [],
				tabsCurrent: 0,
				data: [],
				loadMoreText: "加载中...",
				showLoadMore: false,
				total: 0,
				formDatas: {
					pageNum: 1,
					pageSize: 10,
				},
				commentTotal: 0,
				commentData: [],
				commentInfo: {},
				videoTypeList: ['mp4'],	// 用户可上传得视频文件类型
				dataEmpty: false,
				commenyEmpty: false,
				pathQuery: {},
				swiperCurrent: 0,	// 轮播图当前下标
				popupShow: false,
				popupList: [],
			};
		},
		onLoad(query){
			// 门店id， 用户id
			const {terminalId, longitude, latitude, userId} = query
			// 路由参数
			this.pathQuery = query
			this.userId = this.getUserInfo.id || userId
			this.terminalId = terminalId
			this.getDetail(terminalId, this.userId, longitude, latitude)
			// this.initData()
      
      // 商品失效
      uni.$on('loseGoods',() => {
        this.resetData()
        if(!this.isCommentList()){
        	this.data = []
        	// this.initData()
					this.getTerminalGoodsType()
        }else {
        	this.commentData = []
        	this.initCommentData()
        }
      })
		},
		// 分享给朋友
		onShareAppMessage(){
			return {
				title: this.info.name,
				path: `/storePack/detail/detail?terminalId=${this.pathQuery.terminalId}&longitude=${this.pathQuery.longitude}&latitude=${this.pathQuery.latitude}`
			}
		},
		computed: {
			...mapGetters('user', ['getUserInfo']),
			...mapGetters('global', ['getSystemInfo']),
			// 判断用户评价内容是图片还是视频
			getFileType(){
				return (fileUrl) => {
					return fileUrl && fileUrl.length && fileUrl.substring(fileUrl.lastIndexOf(".") + 1).toLowerCase()
				}
			},
			//	截取用上传的前三个
			getAttachList(){
				return (attachList) => {
					return attachList.slice(0, 3) || []
				}
			},
			// 是否是评论列表
			isCommentList(){
				return () => {
					return this.tabsCurrent === -1 
				}
			},
		},
		methods: {
			// tabs点击卡友评论
			tabsSelectCom(){
				this.tabsCurrent = -1
				this.commentData = []
				this.formDatas.pageNum = 1
				this.initCommentData()
			},
			// 分区分类信息
			async getTerminalGoodsType(){
				const res = await this.$request({
					method: 'POST',
				  url: '/product-center/merchantPurchase/terminalGoodsType',
					data: {
						terminalId: this.terminalId
					}
				})
				this.tabsLabel = res && res.datas && res.datas.reduce((pre, cur) => {
					const obj = {
						name: cur.typeName,
						id: cur.typeId
					}
					pre.push(obj)
					return pre
				}, [])
				// this.tabsLabel.push({ name: `卡友评论(${this.info.evaluationNum})`, id: -1 })
				
				// 初始化分类列表
				this.initData()
			},
			popupClose(){
				this.popupShow = false
			},
			handleSwiperChange(e){
				this.swiperCurrent = e.detail.current
			},
			// 图片预览
			handlePreviewSwiper(){
				uni.previewImage({
					current: this.swiperCurrent,
					urls: this.swiperData
				})
			},
			// 商品详情
			gotoMainDetail(code){
				uni.navigateTo({
					url: `/components/goodsDetail?jfcode=${code}`,
					success: (res) => {
						res.eventChannel.emit('storeInfo', {
							data: {
								storeInfo: this.info, // 门店信息
							}
						})
					}
				});
			},
			// 评价详情
			gotoCommentDetail(id){
				uni.navigateTo({
					url: `/storePack/detail/commentDetail?id=${id}`
				})
			},
			// 图片预览
			handlePreviewImage(url){
				uni.previewImage({
					current: 0,
					urls: [url]
				})
			},
			// 视频播放出错时触发	
			videoErrorCallback(e){
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			resetData(){
				this.data = this.commentData = []
				this.total = this.commentTotal = 0
				this.formDatas.pageNum = 1
				this.loadMoreText = "加载中..."
				this.showLoadMore = false
			},
			async initData(){
				uni.showLoading({
					title: '加载中...'
				})
        const params = {
          ...this.formDatas,
					firstItemTypeId: this.tabsLabel[this.tabsCurrent].id
        }
        // 未登录的用户不需要传
        if (this.userId) {
          params.userId = this.userId
          params.terminalId = this.terminalId
        }
				const res = await this.$request({
					method: 'GET',
					url: '/product-center/merchantPurchase/new/pageGoodsByDriver',
					data: params
				})
				this.total = res.datas.count
				this.data = this.data.concat(res.datas.data)
				this.dataEmpty = this.total === 0
				uni.stopPullDownRefresh();
				uni.hideLoading()
			},
			async initCommentData(){
				uni.showLoading({
					title: '加载中...'
				})
				const res = await this.$request({
					method: 'GET',
					url: '/api-user/terminalEvaluation/list',
					data: {
						...this.formDatas,
						terminalId: this.terminalId
					}
				})
				this.commentInfo = res.datas
				this.commentTotal = res.datas.pageList.count
				this.commentData = this.commentData.concat(res.datas.pageList.data)
				this.commenyEmpty = this.commentTotal === 0
				uni.stopPullDownRefresh();
				uni.hideLoading()
				this.$forceUpdate()
			},
			onReachBottom() {
				if(!this.isCommentList()){
					this.showLoadMore = true;
					if (this.data.length >= this.total) {
						this.loadMoreText = "没有更多数据了!"
						return;
					}
					this.formDatas.pageNum += 1
					this.initData()
				}else {
					this.showLoadMore = true;
					if (this.commentData.length >= this.commentTotal) {
						this.loadMoreText = "没有更多数据了!"
						return;
					}
					this.formDatas.pageNum += 1
					this.initCommentData()
				}
			},
			onClickItem(e) {
				this.resetData()
				if (this.tabsCurrent !== e.index) {
					this.tabsCurrent = e.index
				}
				this.data = []
				this.initData()
				// if(e.id !== -1){
				// 	this.data = []
				// 	this.initData()
				// }else {
				// 	this.commentData = []
				// 	this.initCommentData()
				// }
			},
			handleLookPhoto(){
				uni.navigateTo({
					url: `/storePack/detail/licensePhoto?license=${this.info.license1}`
				})
			},
			handleAction(item){
				if(item.flag === 'phone'){
					// 区分设备
					if(uni.getSystemInfoSync().osName === 'ios'){
						uni.makePhoneCall({
							phoneNumber: this.info.phone
						})
					}else {
						uni.showModal({
							title: "拨打电话",
							content: this.info.phone,
							confirmText: "确认",
							cancelText: "取消",
							success: res => {
								if(res.confirm){
									uni.makePhoneCall({
										phoneNumber: this.info.phone,
									})
								}
							}
						})
					}

				} else {
					uni.openLocation({
						latitude: this.info.lat,
						longitude: this.info.lng,
						name: this.info.name,
						address: this.info.address,
					});
				}
			},
			async getDetail(terminalId, userId, nowLng, nowLat){
				uni.showLoading({
					title: '加载中...'
				})
        const params = { nowLng, nowLat, terminalId }
        if (userId) {
          params.userId = userId
        }
				const res = await this.$request({
					method: 'GET',
				  url: '/api-user/new-new-terminal/app/detail',
					data: params
				})
				
				this.info = res.datas
				// this.tabsLabel[2] = `卡友评论(${this.info.evaluationNum})`
				this.popupList = res.datas.tagList
				
				// 轮播图
				for(let i=1; i<5; i++){
					if(this.info['photo' + i]){
						this.swiperData.push(this.info['photo' + i])
					}
				}
				
				this.getTerminalGoodsType()
				// this.initCommentData()
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	box-sizing: border-box;
	// 轮播图
	.swiper-content {
		position: relative;
		swiper {
			height: 240px;
		}
		.swiper-item {
			image {
				width: 100%;
			}
		}
		
		// swiper-idot
		.swiper-idot {
			position: absolute;
			right: 22rpx;
			bottom: 86rpx;
			background-color: #ffffff;
			font-size: 12px;
			color: #8C8C8C;
			border-radius: 22rpx;
			padding: 2rpx 12rpx;
		}
	}
	
	// 门店信息
	.store-info {
		position: relative;
		z-index: 1;
		margin: -60rpx 20rpx 0 20rpx;
		border-radius: 16rpx;
		// padding: 24rpx 24rpx 18rpx;
		background-color: #ffffff;
		font-size: 12px;
		.si-header {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 24rpx 0;
			.sih-title {
				font-size: 16px;
				color: rgba(0, 0, 0, 0.85);
				text-shadow: 0 0 0.1px currentcolor;
			}
			.sih-share {
				margin-left: 20rpx;
				height: 40rpx;
				padding: 0 10rpx;
				button {
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					padding: 0;
					border: none;
					background-color: transparent;
					box-shadow: none;
					font-size: 14px;
					color: #333333;
					&::after {
						border: none;
						height: auto;
					}
					.sih-label {
						width: 56rpx;
						margin-left: 8rpx;
					}
				}
			}
		}
		

		.siml-flag {
			margin: 0 16rpx;
			// color: rgba(0, 0, 0, 0.35);
			color: #333333;
		}
		
		.siml-eval {
			display: flex;
			align-items: center;
			padding: 16rpx 24rpx 0;
			color: #999999;
			.siml-text {
				margin-left: 4rpx;
			}
			.siml-comment {
				color: rgba(0, 0, 0, 0.35);
			}
			.text-color {
				color: #333333;
			}
		}
		
		.si-tag {
			display: flex;
			margin-top: 28rpx;
			.sit-item {
				color: rgba(255, 123, 123, 1);
				border: 1px solid rgba(255, 123, 123, 1);
				background-color: #ffefef;
				padding: 6rpx 20rpx;
				margin-right: 8rpx;
				border-radius: 4px;
			}
		}
		
		.si-tagList {
			padding: 16rpx 24rpx 0;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			max-height: 108rpx;
			overflow: hidden;
			.sitl-item {
				padding: 4rpx;
				box-sizing: border-box;
				color: #996C00;
				border: 1px solid #996C00;
				border-radius: 4rpx;
				margin: 0 16rpx 16rpx 0;
			}
		}
		
		.si-main {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16rpx;
			border-radius: 16rpx;
			background: linear-gradient(180deg, #FFEFF0 0%, #FFFFFF 100%);
			padding: 18rpx 24rpx;
			box-sizing: border-box;
			.sim-left {
				margin-right: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				color: #333333;
				.simld-place {
					width: calc(100vw - 260rpx);
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.simld-km {
					// color: $uni-primary;
					margin-top: 8rpx;
				}
				.siml-dis {
					color: rgba(0, 0, 0, 0.65);
					// margin-top: 32rpx;
				}
			}
			.sim-right {
				display: flex;
				.simr-action {
					display: flex;
					flex-direction: column;
					align-items: center;
					// padding: 40rpx 0 20rpx;
					margin-right: 40rpx;
					&:nth-last-child(1){
						margin-right: 0;
					}
					image {
						width: 24rpx;
						height: 24rpx;
					}
					.simra-title {
						margin-top: 8rpx;
						color: #4E5669;
						font-size: 12px;
					}
				}
			}
		}
	}

	// 商品、评论
	.tabs {
		margin: 20rpx 20rpx 0;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		.tabs-select {
			display: flex;
			justify-content: space-between;
			align-items: center;
			overflow: hidden auto;
			.ts-com {
				color: #4A5366;
				font-size: 14px;
				min-width: 230rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				.ts-com-count {
					font-size: 12px;
					display: inline-block;
					margin-left: 10rpx;
				}
				&::before {
					position: absolute;
					background-color: #4A5366;
					display: inline-block;
					content: '';
					width: 1px;
					height: 24rpx;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			.tabs_item_com_line {
				position: relative;
				color: #040812;
				font-size: 16px;
				text-shadow: 0 0 0.1px currentColor;
				&::after {
					position: absolute;
					display: inline-block;
					background-color: #F05A5C;
					border-radius: 4rpx;
					box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(240,90,92,0.2);
					content: '';
					width: 88rpx;
					height: 8rpx;
					bottom: -15rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
		/deep/ .u-tabs {
			width: calc( 100% - 230rpx );
			.u-tabs__wrapper__nav__item__text {
				font-size: 14px !important;
			}
			.u-tabs__wrapper__nav__line {
				left: 4.8%;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(240, 90, 92, 0.2);
			}
			.u-tabs__wrapper__nav__item {
				padding: 0 !important;
				flex: auto !important;
				// &:nth-last-child(1){
				// 	min-width: 230rpx !important;
				// }
			}
		}
		.tabs-content {
			// padding: 58rpx 32rpx;
			.tc-list {
				// background-color: #ffffff;
				display: flex;
				border-bottom: 1px solid rgba(0, 0, 0, 0.08);
				padding: 24rpx 0;
				.tcl-left {
					position: relative;
					.tcll-goods {
						width: 200rpx;
						height: 200rpx;
						border-radius: 8rpx;
						overflow: hidden;
						position: relative;
						image {
							width: 200rpx;
							height: 200rpx;
							border-radius: 8rpx;
						}
						// 营销文案
						.tcll-g-markrt {
							position: absolute;
							left: 0;
							bottom: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 9px;
							color: #ffffff;
							background-color: #FB003D;
							height: 34rpx;
							width: 100%;
							font-weight: bold;
							letter-spacing: 1px;
							.tcll-gm-right {
								background: linear-gradient(153deg, #FEFAE7 0%, #FFD938 100%);
								-webkit-background-clip: text; 
								-webkit-text-fill-color: transparent; 
							}
						}
					}
					.tcll-mark {
						position: absolute;
						top: 0;
						right: 0;
						image {
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
				.tcl-right {
					margin-left: 24rpx;
					.tclr-title {
						color: #333333;
						font-size: 14px;
						text-shadow: 0 0 0.1px currentColor;
					}

					.tclr-discount {
						display: flex;
						align-items: center;
						font-size: 14px;
						margin-bottom: 14rpx;
						color: rgba(0, 0, 0, 0.45);
						&:nth-last-child(1){
							margin-bottom: 0;
						}
						.tclrd-tag {
							box-sizing: border-box;
							color: rgba(255, 123, 123, 1);
							border: 1px solid rgba(255, 123, 123, 1);
							background-color: #ffefef;
							padding: 0 4rpx;
							border-radius: 4px;
						}
						.tclrd-des {
							font-size: 13px;
							margin-left: 20rpx;
						}
					}
				
					.tclr-tagList {
						margin-top: 12rpx;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						max-height: 88rpx;
						overflow: hidden;
						.tclrt-item {
							font-size: 11px;
							padding: 4rpx;
							box-sizing: border-box;
							color: #996C00;
							background-color: #FFF8E6;
							border-radius: 4rpx;
							margin: 0 12rpx 8rpx 0;
						}
					}
					
					.tclr-money {
						margin-top: 16rpx;
						.tclrm-color {
							color: rgba(238, 59, 59, 1);
							font-size: 15px;
							text-shadow: 0 0 0.1px currentcolor;
						}
						.tclrm-delete {
							margin-left: 8rpx;
							font-size: 12px;
							color: rgba(0, 0, 0, 0.45);
							text-decoration:line-through;
						}
						.tclr-dollar {
							font-size: 12px;
						}
					}
				}
			}
		
			// 卡友评分
			.tc-score {
				padding: 34rpx 54rpx;
				display: flex;
				justify-content: space-between;
				border-radius: 14px;
				// margin: 20rpx 0;
				background: linear-gradient(180deg, #FFEFF0 0%, #FFFCFC 100%);
				.tsc-left {
					display: flex;
					flex-direction: column;
					justify-content: center;
					border-right: 1px solid #FFE5E5;
					padding-right: 42rpx;
					.tscl-count {
						font-size: 16px;
						margin-bottom: 12rpx;
						.tscl-count-text {
							font-size: 12px;
							text-shadow: none;
							display: inline-block;
							margin-left: 4rpx;
						}
					}
				}
				.tsc-right {
					flex: 1;
					display: flex;
					justify-content: space-between;
					margin-left: 60rpx;
					.tscr-type {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						.tscrt-label {
							color: rgba(0, 0, 0, 0.65);
							font-size: 12px;
						}
						.tscrt-value {
							font-size: 14px;
							margin-top: 12rpx;
							color: rgba(0, 0, 0, 0.85);
							text-shadow: 0 0 0.1px currentcolor;
						}
					}
				}
			}
			
			// 卡友评论
			.tc-c-list {
				background-color: #ffffff;
				border-radius: 12rpx;
				padding: 20rpx 28rpx 28rpx;
				margin-top: 20rpx;
				// 头部基本信息
				.tc-cl-header {
					display: flex;
					justify-content: space-between;
					font-size: 12px;
					.tc-clh-left {
						display: flex;
						.tc-clhl-img {
							margin-right: 14rpx;
							image {
								width: 40px;
								height: 40px;
								border-radius: 16rpx;
							}
						}
						.tc-clhl-baseInfo {
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							padding: 8rpx 0;
							box-sizing: border-box;
							.tc-clhlb-number {
								display: flex;
								align-items: center;
								color: rgba(0, 0, 0, 1);
								.tc-clhlbn-phone {
									font-size: 13px;
									text-shadow: 0 0 0.1px currentColor;
									margin-right: 8rpx;
								}
								.tc-clhlbn-car {
									// font-size: 10px;
									// color: rgba(114, 69, 0, 1);
									// margin-left: 6rpx;
									// padding: 0 2rpx;
									// background: linear-gradient(180deg, #FFE9BE 0%, #FFD88B 100%);
									// border-radius: 4rpx;
									
									.tc-clhlbn-car-box {
										font-size: 9px;
										border: 1px solid #22D194;
										border-radius: 4rpx;
										display: flex;
										align-items: center;
										.tc-clhlbn-car-box-left {
											background-color: #22D194;
											border-top-right-radius: 4rpx;
											border-bottom-right-radius: 4rpx;
											border: 1px solid #22D194;
											color: #ffffff;
											padding: 2rpx 6rpx;
										}
										.tc-clhlbn-car-box-right {
											color: #22D194;
											padding: 2rpx 6rpx;
										}
									}
								}
							}
							.tc-clhlb-score {
								display: flex;
								align-items: center;
								text {
									margin-left: 6rpx;
								}
							}
						}
					}
					
					.tc-clh-right {
						color: #ABAFB8;
						font-size: 11px;
					}

				}
				// 评价内容
				.tc-cl-main {
					.tc-clm-content {
						margin-top: 14rpx;
						font-size: 13px;
						color: rgba(0,0,0,0.85);
					}
					.tc-clm-video {
						display: flex;
						gap: 8rpx;
						margin: 26rpx 0;
						.tc-clmv-list {
							// .view-tc-tlmvl-v,
							// .view-tc-tlmvl-i {
								image,
								video {
									width: 216rpx;
									height: 88px !important;
									border-radius: 12rpx;
								}
							// }
						}
					}
				}
				// 回复
				.tc-cl-reply {
					display: flex;
					.tc-clr-icon {
						image {
							width: 16px;
							height: 16px;
							margin-top: 4px;
						}
					}
					.tc-clr-des {
						font-size: 12px;
						.tc-clrd-label {
							// color: rgba(255, 154, 56, 1);
							color: #4A5366;
							margin: 0 6rpx;
						}
						.tc-clrd-value {
							color: #666666;
						}
					}
				}
			}
			
			// 评论内容超过两行省略
			.ellipsis-2 {
				line-height: 23px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp:2;
			}
			
			// 无内容
			.empty {
				width: 100%;
				// height: 90vh;
				padding-bottom: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background-color: #ffffff;
				image {
					width: 220px;
					height: 180px;
				 }
				text {
					font-size: 30rpx;
					color: rgba(0,0,0,0.45);
					line-height: 30rpx;
				}
			}
		}
		
		// 加载中、
		.tabs-loadmore-text {
			text-align: center;
			padding: 10px;
		}
	}
	
	// 文字颜色
	.text-color {
		color: #F05A5C;
	}
	
	
	// 门店服务标签
	.popup-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #F7F8FA;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		.pc-title {
			width: 100%;
			text-align: center;
			padding: 26rpx 0;
			font-size: 16px;
			color: #323233;
			background-color: #ffffff;
			position: relative;
			/deep/ .u-icon {
				position: absolute;
				right: 40rpx;
				top: 34rpx;
			}
		}
		.pc-list {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			box-sizing: border-box;
			padding: 40rpx;
			background-color: #ffffff;
			.pc-item {
				padding: 12rpx 48rpx;
				background-color: #F2F2F2;
				font-size: 12px;
				color: #262626;
				margin: 0 20rpx 20rpx 0;
				border-radius: 32rpx;
			}
		}
	}
}

</style>
